<template>
  <div>
    <el-row>
      <el-button size="mini" @click="onAddItem"> 新增 </el-button>
      <el-button size="mini" @click="openData"> 刷新 </el-button>
    </el-row>
    <div style="height: 15px"></div>

    <el-table :data="FModuleLoginList">
      <el-table-column prop="FModuleLoginCode" label="配置代码" />
      <el-table-column prop="FTableName" label="用户表名" />
      <el-table-column prop="FFieldUserID" label="ID字段" />
      <el-table-column prop="FFieldUserCode" label="代码字段" />
      <el-table-column prop="FFieldUserName" label="名称字段" />
      <el-table-column prop="FFieldUserPass" label="密码字段" />
      <el-table-column prop="FIsUse" label="启用" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="onShowEdit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="模块登陆配置" v-model="FShowEdit" destroy-on-close>
      <el-form :model="FIndexModuleLogin" label-width="80px">
        <el-row gutter="24">
          <el-col :span="12">
            <el-form-item label="配置代码">
              <el-input
                v-model="FIndexModuleLogin.FModuleLoginCode"
                placeholder="必需的，请输入配置代码，唯一"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户表名">
              <el-input
                v-model="FIndexModuleLogin.FTableName"
                placeholder="必需的，请输入用户表表名"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row gutter="24">
          <el-col :span="12">
            <el-form-item label="ID字段">
              <el-input
                v-model="FIndexModuleLogin.FFieldUserID"
                placeholder="必需的，请输入用户表ID哪个字段"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="代码字段">
              <el-input v-model="FIndexModuleLogin.FFieldUserCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row gutter="24">
          <el-col :span="12">
            <el-form-item label="名称字段">
              <el-input v-model="FIndexModuleLogin.FFieldUserName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码字段">
              <el-input
                v-model="FIndexModuleLogin.FFieldUserPass"
                placeholder="必需的，请输入用户表密码哪个字段"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="color: red; font-size: 18px">
          登陆SQL事例,其中@LoginCode参数是固定的,如下例子:
          <p>&nbsp;&nbsp;select userID, userCode,userName,userPass</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;from users where userCode=@LoginCode</p>
        </div>
        <el-form-item label="登陆SQL">
          <el-input
            v-model="FIndexModuleLogin.FLoginSQL"
            type="textarea"
            :rows="5"
            placeholder="请输入登陆的SQL语句"
          ></el-input>
        </el-form-item>
        <el-form-item label="启用">
          <el-switch
            v-model="FIndexModuleLogin.FIsUse"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="FShowEdit = false">取 消</el-button>
          <el-button type="primary" @click="saveIndex">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import ModuleLogApi, {
  TModuleLogin,
} from "@/baselib/module/moduleLogin/ModuleLoginApi";
import TFormBase from "@/views/BaseForm";
export default class TFormModuleLoginList extends TFormBase {
  private FShowEdit: boolean = false;
  private FIndexModuleLogin: TModuleLogin = new TModuleLogin();
  private FModuleLoginList: TModuleLogin[] = [];
  public created() {
    this.openData();
  }
  private async openData() {
    var lResult = await ModuleLogApi.GetModuleLoginList();
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.FModuleLoginList = lResult.resultData;
    this.$myMsgHelp.msgHintAutoClose("打开数据成功");
  }
  private onAddItem() {
    this.FIndexModuleLogin = new TModuleLogin();
    this.FShowEdit = true;
  }
  private onShowEdit(qItem: TModuleLogin) {
    //
    this.FIndexModuleLogin = qItem;
    this.FShowEdit = true;
  }
  private async saveIndex() {
    this.FShowEdit = false;
    var lResult = await ModuleLogApi.SaveModuleLogin(this.FIndexModuleLogin);
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.$myMsgHelp.msgHintAutoClose("保存数据成功");
    this.openData();
  }
}
</script>

